<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

<div id="page-title">
    <h3>
        保有量分析
    </h3>
</div>

<div class="example-box">
    <div class="example-code">
        <a href="/stat/inventory" class="btn large primary-bg" title="">
            <span class="button-content">保有量现状</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/structure" class="btn large primary-bg" title="">
            <span class="button-content">保有量组成</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/trend" class="btn large primary-bg" title="">
            <span class="button-content">保有量趋势</span>
        </a>
    </div>
</div>
<div class="pad10A">

<form id="form" action="/stat/trendbydate" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-2">
    			<label for="from">
                    From:
                </label>
    				<#if startdate>
            		<input type="text"   name="startdate" data-trigger="focus" data-required="true" class="parsley-validated" value="${startdate}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
          			<#else>
    				<input placeholder="起始时间" type="text"   name="startdate" data-trigger="focus" data-required="true" class="parsley-validated" value="" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
    				</#if>
    			</div>
    			<div class="form-input col-md-2">
    				<label for="from">
	                    To:
	                </label>	
    				<#if enddate>
		            <input type="text"   name="enddate" data-trigger="focus" data-required="true" class="parsley-validated" value="${enddate}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
		            <#else>
		            <input placeholder="结束时间" type="text"   name="enddate" data-trigger="focus" data-required="true" class="parsley-validated" value="" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
		            </#if>
		        </div>
		        <div class="form-input col-md-2" style="margin-top:16px;">
		        	<select name="condition">
		        		<option value="day" <#if param=='day'>selected</#if>>日</option>
		        		<option value="week" <#if param=='week'>selected</#if>>周</option>
		        		<option value="month" <#if param=='month'>selected</#if>>月</option>
		        		<option value="year" <#if param=='year'>selected</#if>>年</option>
		        	</select>
		        </div>
    			<div class="form-input col-md-2" style="margin-top:16px;">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!">
			            <span class="button-content">
			                查询
			            </span>
	                </a>
		        </div>
    		</div>
   </form>
<br>
<div style="col-md-12">
	<hr>
	<br>
	<div class="form-row">
		<div class="col-md-11" id="trend" ></div>    	
    </div>
</div>

</div>

<script type="text/javascript" src="/assets/js/minified/demo/exporting.js"></script>
<script type="text/javascript" src="/assets/js/minified/demo/highcharts.js"></script>
<script type="text/javascript">

$(function () {
	var day=[
			<#list datalist as xdata>
			'${xdata}',
			</#list>
			];
    $('#trend').highcharts({
        title: {
            text: '保有量趋势',
            x: -20 //center
        },
        xAxis: {
            categories: day,
            labels: {
                rotation: -45,
                align: 'right'
            },
            tickInterval:parseInt(day.length/10)
        },
        yAxis: {
        	min:0,
            title: {
                text: '元'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '保有量',
            data: [<#list trendlist as ydata>${ydata},</#list>]
        }]
    });
});


$(function(){
		$("#search").click(function(){
			$('#form').parsley('validate');
	    	$('#form').trigger('submit');
		});
	});	
										

</script>
